<!--卡池奖金(理财产品)-->
<template>
	<view class="">
		<view class="hdtybox" :class="hdc">
			<topboxVue :tit="$t('hd.bt11')"></topboxVue>
			<view class="cpbox">

				<view class="cpbox-bit mb20" v-for="item in data.products">
					<view class="cpbox-bit-tit bj_between">
						<view class="bj_left">
							<image src="/static/hd/cl1.png" class="cpbox-bit-tit-dp"></image>
							<view class="">
								<text>{{$t("cpjl.txt1")}}</text>
								<text>{{item.min}}</text>
								<text>{{$t("cpjl.txt2")}}</text>
								<text class="cy">{{item.max}}</text>
							</view>
						</view>
						<view class="bj_between">
							<view class="cpbox-bit-tit-btn" @click="togm(item)">
								{{$t("cpjl.btn1")}}
							</view>
							<image src="/static/hd/js.png" class="cpbox-bit-tit-np" mode=""></image>
						</view>
					</view>

					<view class="tc f24">
						<view class="cpbox-bit-th bj_between">
							<view class="w30">
								{{$t("cpjl.th1")}}
							</view>
							<view class="w60">
								{{$t("cpjl.th2")}}
							</view>
							<view class="w30">
								{{$t("cpjl.th3")}}
							</view>
						</view>
						<view class="cpbox-bit-tr bj_between">
							<view class="w30">
								{{item.name}}
							</view>
							<view class="w60">
								{{$t("menu.$")}} {{item.min}}
							</view>
							<view class="w30">
								{{item.day_rate}}
							</view>
						</view>
					</view>


				</view>

				<view class="f30 fwb mb20">
					{{$t("cpjl.tit1")}}
				</view>
				<view class="f22 c9c mb10" v-for="i in 4">
					{{$t("cpjl.stxt" + i)}}
				</view>
			</view>
			<bottomVue></bottomVue>
			<zero-loading type="surround" v-if="loading"></zero-loading>

		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>


</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';

	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")
	let loading = ref(false)

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}
	let data = ref({})
	let status_code = ref("")
	onShow(function() {
		common.savingInit().then(res => {
			data.value = res.data.data
			status_code.value = res.data.status_code
			console.log(data.value);
		})
	})

	function togm(item) {
		console.log(item);
		if (status_code.value != 0) {
			uni.navigateTo({
				url: "/pages/index/tx"
			})
			return
		}
		if (loading.value) {
			return
		}
		loading.value = true
		common.savingBuy({
			id: item.id
		}).then(res => {
			messageText.value = res.data.message
			if (res.data.success) {
				msgType.value = "success"
			} else {
				msgType.value = "error"
			}
			message.value.open();
			loading.value = false

		})
	}
</script>

<style scoped lang="scss">
	.cpbox {
		padding: 20rpx;

		&-bit {
			background: #0F194D;
			border-radius: 20rpx;

			&-tit {
				padding: 20rpx;
				border-radius: 20rpx;
				font-weight: bold;

				&-btn {
					width: 172rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 30rpx;
					background: linear-gradient(#1464D7 0%, #4FB4E9 100%);
					border-radius: 100rpx;
					margin-right: 20rpx;
				}

				&-np {
					width: 24rpx;
					height: 24rpx;
				}

				&-dp {
					width: 56rpx;
					height: 56rpx;
					margin-right: 10rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			&-th {
				height: 76rpx;
				background: linear-gradient(90deg, #0F3E44 0%, #172684 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}

			&-tr {
				height: 76rpx;
				background: #080F37;
			}

			&-tr:last-child {
				border-radius: 0rpx 0rpx 20rpx 20rpx;
			}
		}
	}
</style>